<template>
  <view class="audio_center">
    <view class="audio_center_cover">
      <image
        v-if="audioCover"
        class="audio_center_cover_img"
        mode="aspectFill"
        :src="audioCover"
      ></image>
      <view
        class="iconfont"
        @tap="clickAudio"
        :class="audioStatus ? 'icon-play-stop' : 'icon-play-cell'"
      ></view>
    </view>
    <view class="audio_center_right">
      <view v-if="stringObject(src) == 'string'" class="single">
        <view class="single_title">
          <view class="single_title_info" :style="{ color: audioTitleColor }">
            <text v-if="showTitle">{{ audioTitle }}</text>
          </view>
          <view class="tips" v-if="showTime">{{ timeTxt }}</view>
        </view>
        <slider
          :backgroundColor="backgroundColor"
          :activeColor="activeColor"
          @change="sliderChange"
          :value="sliderIndex"
          :max="maxSliderIndex"
          :block-size="0"
        />
      </view>
      <view v-else>相关功能正在开发中~</view>
    </view>
  </view>
</template>
<script>
let timer
export default {
  name: 'syAudio',
  emits: ['audioPlay', 'audioPause', 'audioEnd', 'audioCanplay', 'change'],
  data() {
    return {
      audioStatus: false,

      timeTxt: '00 : 00',
      timeIndex: 0,

      sliderIndex: 0,
      maxSliderIndex: 100,

      stringObject: (data) => {
        return typeof data
      },
			showTime: false,
      initAudio: true,
      innerAudioContext: uni.createInnerAudioContext()
    }
  },
  props: {
    //是否自动播放(只支持微信内置浏览器,小程序，app)
    autoplay: {
      type: Boolean,
      default: false
    },
    //音频地址
    src: {
      type: [String, Array],
      default: ''
    },
    //是否倒计时
    isCountDown: {
      type: Boolean,
      default: false
    },
    //音乐封面
    audioCover: {
      type: String,
      default: ''
    },
    //标题
    audioTitle: {
      type: String,
      default: ''
    },
    //标题颜色
    audioTitleColor: {
      type: String,
      default: '#333'
    },
    //副标题
    subheading: {
      type: String,
      default: ''
    },
    //滑块左侧已选择部分的线条颜色
    activeColor: {
      type: String,
      default: '#bf41a2'
    },
    //滑块右侧背景条的颜色
    backgroundColor: {
      type: String,
      default: '#f1c38b'
    },
    //是否倒计时
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    src: {
      handler: function (newVal, oldVal) {
        this.innerAudioContext.src = typeof newVal == 'string' ? newVal : newVal
      },
      deep: true
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    isLogin() {
      return this.$store.getters.token
    }
  },
  async mounted() {
    this.innerAudioContext.src = typeof this.src == 'string' ? this.src : this.src[0]

    if (this.autoplay) {
      if (!this.src)
        return console.error('src cannot be empty，The target value is string or array')

      // #ifdef H5
      var ua = window.navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        const jweixin = require('../../utils/jweixin')

        jweixin.config({})
        jweixin.ready(() => {
          WeixinJSBridge.invoke('getNetworkType', {}, (e) => {
            this.innerAudioContext.play()
            this.countDown()
          })
        })
      }
      // #endif

      // #ifndef H5
      this.innerAudioContext.autoplay = true
      // #endif
    }

    this.innerAudioContext.onPlay((data) => {
      this.audioStatus = true
      this.$emit('audioPlay')
    })

    this.innerAudioContext.onPause(() => {
      this.audioStatus = false
      this.$emit('audioPause')
    })

    this.innerAudioContext.onEnded(() => {
      this.audioStatus = !this.audioStatus
      this.$emit('audioEnd')
    })

    this.innerAudioContext.onTimeUpdate(() => {
      if (this.innerAudioContext.duration) {
				this.maxSliderIndex = parseFloat(this.innerAudioContext.duration).toFixed(2)
				this.countDown()
				this.showTime = true
			}
    })

    let intval = null
    this.innerAudioContext.onCanplay((event) => {
      // initAudio 进入页面为true，只要点击了播放置为false，避免出现bug
      // if (this.initAudio) {
      //   this.innerAudioContext.stop()
      //   this.innerAudioContext.volume = 1
      //   this.innerAudioContext.seek(0)
      //   this.audioStatus = false
      // }
      this.$emit('audioCanplay')
      // #ifdef MP
      // intval = setInterval(() => {
      // 	if (this.innerAudioContext.duration) {
      //     this.maxSliderIndex = parseFloat(this.innerAudioContext.duration).toFixed(2);
      // 		clearInterval(intval)
      // 	}
      // }, 200)
      // #endif
    })
  },
  methods: {
    // 格式化时间为 MM:SS 格式
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    },
    //销毁innerAudioContext()实例
    audioDestroy() {
      if (this.innerAudioContext) {
        this.innerAudioContext.destroy()
        this.audioStatus = false
      }
    },
    //跳转到指定位置
    audioSeek(value) {
      this.sliderChange(value)
    },
    //控制音乐播放/暂停
    audioPause() {
      this.clickAudio()
    },
    countDown() {
      timer = setInterval(() => {
        this.sliderIndex = parseFloat(this.innerAudioContext.currentTime).toFixed(2)

        this.timeTxt = this.getTime(
          this.isCountDown
            ? this.innerAudioContext.duration - this.innerAudioContext.currentTime
            : this.innerAudioContext.currentTime
        )
        this.timeTxt = this.isCountDown ? '- ' + this.timeTxt : this.timeTxt

        if (this.innerAudioContext.currentTime >= this.innerAudioContext.duration) {
          clearInterval(timer)
        }
      }, 100)
    },
    clickAudio() {
			this.$emit('nav')
      // this.initAudio = false
      // if (this.audioStatus && !this.innerAudioContext.paused) {
      //   this.innerAudioContext.pause()
      //   clearInterval(timer)
      // } else {
      //   this.innerAudioContext.play()
      // }
    },
    getTime(time) {
      let m = parseInt((time / 60) % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
      s = s < 10 ? '0' + s : s
      return m + ' : ' + s
    },
    sliderChange(e) {
      this.innerAudioContext.seek(e.detail ? e.detail.value : e)
      this.sliderIndex = e.detail ? e.detail.value : e
    }
  },
  onUnload() {
    this.audioDestroy()
  },
  onHide() {
    this.audioDestroy()
  },
  beforeDestroy() {
    this.audioDestroy()
  }
}
</script>

<style lang="scss" scoped>
@import url('../../static/font/iconfont.css');

::v-deep uni-slider,
::v-deep slider {
  margin: 0;
  padding: 0;
}

.audio_center {
  display: flex;
  box-shadow: 0 0 10rpx #c3c3c3;
  border-radius: 10rpx;
  overflow: hidden;
  align-items: stretch;

  .single {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16rpx 24rpx 10rpx 0;

    .tips {
      font-size: 22rpx;
      color: #919191;
      flex-shrink: 0;
    }

    &_title {
      &_info {
        font-size: 28rpx;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-right: 20rpx;
      }

      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
  }

  &_cover {
    flex-shrink: 0;
    background: #f5f5f5;
    position: relative;
    display: flex;
    align-items: stretch;
    width: 127rpx;

    .iconfont {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 9;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 64rpx;
      background: rgba(0, 0, 0, 0.25);
      color: #fff;
    }

    &_img {
      width: 127rpx;
      height: 100%;
      border-radius: 10rpx 0 0 10rpx;
    }

    margin-right: 30rpx;
  }

  &_right {
    display: flex;
    align-items: stretch;
    flex: 1;
  }
}
</style>
